
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-duihua"></i>
                    <div class="name">对话</div>
                    <div class="fontclass">.icon-duihua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-llreservetag"></i>
                    <div class="name">预订标签</div>
                    <div class="fontclass">.icon-llreservetag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tel"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-tel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yudingxinxi"></i>
                    <div class="name">预订信息</div>
                    <div class="fontclass">.icon-yudingxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone"></i>
                    <div class="name">phone</div>
                    <div class="fontclass">.icon-phone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daodiantiyan"></i>
                    <div class="name">到店体验</div>
                    <div class="fontclass">.icon-daodiantiyan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quedingyuding"></i>
                    <div class="name">预订</div>
                    <div class="fontclass">.icon-quedingyuding</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-oksquared"></i>
                    <div class="name">ok-squared</div>
                    <div class="fontclass">.icon-oksquared</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua"></i>
                    <div class="name">群蜂电话</div>
                    <div class="fontclass">.icon-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-89"></i>
                    <div class="name">业绩</div>
                    <div class="fontclass">.icon-89</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quxiao"></i>
                    <div class="name">取消</div>
                    <div class="fontclass">.icon-quxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jifen"></i>
                    <div class="name">积分</div>
                    <div class="fontclass">.icon-jifen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontzhuye"></i>
                    <div class="name">主页</div>
                    <div class="fontclass">.icon-iconfontzhuye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caozuochenggong"></i>
                    <div class="name">操作成功</div>
                    <div class="fontclass">.icon-caozuochenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoppingcart"></i>
                    <div class="name">shopping-cart</div>
                    <div class="fontclass">.icon-shoppingcart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-71shibai"></i>
                    <div class="name">失败</div>
                    <div class="fontclass">.icon-71shibai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ok"></i>
                    <div class="name">ok</div>
                    <div class="fontclass">.icon-ok</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxitongzhi"></i>
                    <div class="name">消息_通知</div>
                    <div class="fontclass">.icon-xiaoxitongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-loginuersicon"></i>
                    <div class="name">登录 用户 icon</div>
                    <div class="fontclass">.icon-loginuersicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanzhengma"></i>
                    <div class="name">验证码</div>
                    <div class="fontclass">.icon-yanzhengma</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaofei01"></i>
                    <div class="name">消费</div>
                    <div class="fontclass">.icon-xiaofei01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gaoxiaofei"></i>
                    <div class="name">高消费</div>
                    <div class="fontclass">.icon-gaoxiaofei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jifenshangcheng"></i>
                    <div class="name">积分商城</div>
                    <div class="fontclass">.icon-jifenshangcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shibai"></i>
                    <div class="name">失败</div>
                    <div class="fontclass">.icon-shibai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima1"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-oksign"></i>
                    <div class="name">ok-sign</div>
                    <div class="fontclass">.icon-oksign</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanji"></i>
                    <div class="name">关机</div>
                    <div class="fontclass">.icon-guanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-saomiaoerweima"></i>
                    <div class="name">扫描二维码</div>
                    <div class="fontclass">.icon-saomiaoerweima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiushui"></i>
                    <div class="name">酒水</div>
                    <div class="fontclass">.icon-jiushui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quxiao1"></i>
                    <div class="name">取消</div>
                    <div class="fontclass">.icon-quxiao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-settings"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-settings</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-denglu"></i>
                    <div class="name">登录</div>
                    <div class="fontclass">.icon-denglu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone1"></i>
                    <div class="name">phone</div>
                    <div class="fontclass">.icon-phone1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon2"></i>
                    <div class="name">扫描二维码</div>
                    <div class="fontclass">.icon-icon2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiu"></i>
                    <div class="name">酒</div>
                    <div class="fontclass">.icon-jiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxitongzhi1"></i>
                    <div class="name">消息通知</div>
                    <div class="fontclass">.icon-xiaoxitongzhi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuding"></i>
                    <div class="name">预订</div>
                    <div class="fontclass">.icon-yuding</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mima1"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-mima1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jifen1"></i>
                    <div class="name">积分</div>
                    <div class="fontclass">.icon-jifen1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yeji"></i>
                    <div class="name">业绩</div>
                    <div class="fontclass">.icon-yeji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-clean"></i>
                    <div class="name">清除</div>
                    <div class="fontclass">.icon-clean</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontzhizuobiaozhunbduan16"></i>
                    <div class="name">已预订</div>
                    <div class="fontclass">.icon-iconfontzhizuobiaozhunbduan16</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontzhizuobiaozhunbduan34"></i>
                    <div class="name">取消预订</div>
                    <div class="fontclass">.icon-iconfontzhizuobiaozhunbduan34</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-23"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-23</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-talk"></i>
                    <div class="name">对话</div>
                    <div class="fontclass">.icon-talk</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianjiechaoshi"></i>
                    <div class="name">连接超时</div>
                    <div class="fontclass">.icon-lianjiechaoshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-test"></i>
                    <div class="name">色块－喇叭</div>
                    <div class="fontclass">.icon-icon-test</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gerenshezhi"></i>
                    <div class="name">个人设置</div>
                    <div class="fontclass">.icon-gerenshezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuding1"></i>
                    <div class="name">预订</div>
                    <div class="fontclass">.icon-yuding1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zonghekaidan"></i>
                    <div class="name">综合开单</div>
                    <div class="fontclass">.icon-zonghekaidan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lajitong"></i>
                    <div class="name">垃圾桶</div>
                    <div class="fontclass">.icon-lajitong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianchaxiang"></i>
                    <div class="name">检查项</div>
                    <div class="fontclass">.icon-jianchaxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-laba"></i>
                    <div class="name">喇叭</div>
                    <div class="fontclass">.icon-laba</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weizhifu"></i>
                    <div class="name">未支付</div>
                    <div class="fontclass">.icon-weizhifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuding2"></i>
                    <div class="name">预订</div>
                    <div class="fontclass">.icon-yuding2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mima2"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-mima2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yudingshu"></i>
                    <div class="name">预订数</div>
                    <div class="fontclass">.icon-yudingshu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongzhi"></i>
                    <div class="name">通知</div>
                    <div class="fontclass">.icon-tongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mima3"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-mima3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kehuguanli"></i>
                    <div class="name">客户管理</div>
                    <div class="fontclass">.icon-kehuguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-membership-card_icon"></i>
                    <div class="name">会员卡</div>
                    <div class="fontclass">.icon-membership-card_icon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua1"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kehuguanli1"></i>
                    <div class="name">客户管理</div>
                    <div class="fontclass">.icon-kehuguanli1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lajitong1"></i>
                    <div class="name">垃圾桶</div>
                    <div class="fontclass">.icon-lajitong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenzhanghuoke-"></i>
                    <div class="name">文章获客-未支付</div>
                    <div class="fontclass">.icon-wenzhanghuoke-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengluchaoshi"></i>
                    <div class="name">登录超时</div>
                    <div class="fontclass">.icon-dengluchaoshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zengsong"></i>
                    <div class="name">赠送</div>
                    <div class="fontclass">.icon-zengsong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenhetongguo"></i>
                    <div class="name">不同意</div>
                    <div class="fontclass">.icon-shenhetongguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qingchu"></i>
                    <div class="name">清除</div>
                    <div class="fontclass">.icon-qingchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lajitong2"></i>
                    <div class="name">垃圾桶</div>
                    <div class="fontclass">.icon-lajitong2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yeji1"></i>
                    <div class="name">业绩</div>
                    <div class="fontclass">.icon-yeji1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chenggong"></i>
                    <div class="name">成功</div>
                    <div class="fontclass">.icon-chenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihuakuang"></i>
                    <div class="name">对话框</div>
                    <div class="fontclass">.icon-duihuakuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianchajihua"></i>
                    <div class="name">检查计划</div>
                    <div class="fontclass">.icon-jianchajihua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-securityCode-b"></i>
                    <div class="name">验证码</div>
                    <div class="fontclass">.icon-securityCode-b</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangshang3"></i>
                    <div class="name">向下边框三角</div>
                    <div class="fontclass">.icon-xiangshang3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingli"></i>
                    <div class="name">经理</div>
                    <div class="fontclass">.icon-jingli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-u"></i>
                    <div class="name">预订</div>
                    <div class="fontclass">.icon-u</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxitongzhi2"></i>
                    <div class="name">消息通知</div>
                    <div class="fontclass">.icon-xiaoxitongzhi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaofeisongquan"></i>
                    <div class="name">消费送券</div>
                    <div class="fontclass">.icon-xiaofeisongquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kehu"></i>
                    <div class="name">客户管理</div>
                    <div class="fontclass">.icon-kehu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangyou2"></i>
                    <div class="name">向下边框三角</div>
                    <div class="fontclass">.icon-xiangyou2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangzuo4"></i>
                    <div class="name">向下边框三角</div>
                    <div class="fontclass">.icon-xiangzuo4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangxia2"></i>
                    <div class="name">向下边框三角</div>
                    <div class="fontclass">.icon-xiangxia2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zengsongfuwushenpi"></i>
                    <div class="name">赠送服务审批</div>
                    <div class="fontclass">.icon-zengsongfuwushenpi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daizhifudingdan"></i>
                    <div class="name">待支付订单</div>
                    <div class="fontclass">.icon-daizhifudingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-laba1"></i>
                    <div class="name">喇叭</div>
                    <div class="fontclass">.icon-laba1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon--laba"></i>
                    <div class="name">31-喇叭</div>
                    <div class="fontclass">.icon--laba</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua2"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-menu_kehujingliguanli"></i>
                    <div class="name">menu_客户经理管理</div>
                    <div class="fontclass">.icon-menu_kehujingliguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihua1"></i>
                    <div class="name">对话</div>
                    <div class="fontclass">.icon-duihua1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gerenshezhi1"></i>
                    <div class="name">个人设置</div>
                    <div class="fontclass">.icon-gerenshezhi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zengsong1"></i>
                    <div class="name">赠送</div>
                    <div class="fontclass">.icon-zengsong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chenggong1"></i>
                    <div class="name">成功</div>
                    <div class="fontclass">.icon-chenggong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuanjifen"></i>
                    <div class="name">会员积分</div>
                    <div class="fontclass">.icon-huiyuanjifen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daizhifu"></i>
                    <div class="name">待支付</div>
                    <div class="fontclass">.icon-daizhifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiulei"></i>
                    <div class="name">酒类</div>
                    <div class="fontclass">.icon-jiulei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiu11"></i>
                    <div class="name">酒</div>
                    <div class="fontclass">.icon-jiu11</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kehuguanli2"></i>
                    <div class="name">客户管理</div>
                    <div class="fontclass">.icon-kehuguanli2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiu1"></i>
                    <div class="name">酒</div>
                    <div class="fontclass">.icon-jiu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zengsong2"></i>
                    <div class="name">赠送</div>
                    <div class="fontclass">.icon-zengsong2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone2"></i>
                    <div class="name">phone</div>
                    <div class="fontclass">.icon-phone2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yeji2"></i>
                    <div class="name">业绩</div>
                    <div class="fontclass">.icon-yeji2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua3"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kehujingliguanli-"></i>
                    <div class="name">客户经理管理-01</div>
                    <div class="fontclass">.icon-kehujingliguanli-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-userinfo"></i>
                    <div class="name">个人设置</div>
                    <div class="fontclass">.icon-userinfo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiu2"></i>
                    <div class="name">酒</div>
                    <div class="fontclass">.icon-jiu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima2"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kehu1"></i>
                    <div class="name">客户管理</div>
                    <div class="fontclass">.icon-kehu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingliren"></i>
                    <div class="name">经理人</div>
                    <div class="fontclass">.icon-jingliren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche1"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima3"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-"></i>
                    <div class="name">超时</div>
                    <div class="fontclass">.icon-icon-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-weibiaoti--</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
